<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8" />
        <title>Protocol Buffer Tool</title>
        <link rel="stylesheet" type="text/css" th:href="@{/css/style.css}" />
        <script type="text/javascript" th:src="@{/js/jquery-3.2.1.min.js}" />
        <script type="text/javascript" th:src="@{/js/index.js}" />
    </head>
    <body>
        <div>
            <span class="label">接口地址：</span>
            <input type="text" name="interfaceUrl" id="interfaceUrl" class="input_txt" />
        </div>
        <div>
            <span class="label">请求类型：</span>
            <select name="methodType" id="methodType">
                <option value="POST">POST</option>
                <option value="GET">GET</option>
            </select>
        </div>
        <div>
            <span class="label">数据格式：</span>
            <select name="protocolType" id="protocolType">
                <option value="application/x-protobuf">application/x-protobuf</option>
                <option value="application/json">application/json</option>
            </select>
        </div>

        <div>
            <span class="label">Proto文件：</span>
            <select name="protoFileName" id="protoFileName">
                <option value="">--请选择--</option>
                <option th:each="protoFile,protoFileStat:${protoFileList}" th:value="${protoFile}" th:text="${protoFile}"></option>
            </select>&nbsp;&nbsp;
            <span style="color: red">如果Proto文件没有选择项，或没有您需要的请使用的Proto文件选择项，就请使用下面的Proto文件上传功能，如果有选择项，则可以不必上传</span>
        </div>

        <div>
            <form action="/uploadProtoFile" id="protoFileForm" method="POST" enctype="multipart/form-data">
                <span class="label">上传Proto文件：</span>
                <input type="file" name="protoFile" id="protoFile" />
                <input type="button" value="上传" onclick="uploadProtoFile();" class="button" />
                <span id="uploadResult"></span>
            </form>
        </div>

        <div>
            <span class="label">请求参数：</span>
            <textarea name="paramData" id="paramData" rows="20" cols="130"></textarea>
        </div>
        <div>
            <input type="submit" name="executeHttpRequest" id="executeHttpRequest" value="执行请求" class="button" onclick="executeHttpRequest()" />
            <span id="errorMsg" style="color: red"></span>
        </div>
        <hr />
        <div>
            <span class="label">返回结果：</span>
        </div>
        <div>
            <span style="font-weight: bold;">请求头信息：</span><br/>
            <div id="requestHeader" style="color: green"></div><br/><br/>
            <span style="font-weight: bold;">请求参数信息：</span><br/>
            <div id="requestBody" style="color: green"></div><br/><br/>
            <span style="font-weight: bold;">响应信息：</span><br/>
            <div id="responseHeader" style="color: green"></div><br/><br/>
            <span style="font-weight: bold;">响应参数信息：</span><br/>
            <div id="responseBody" style="color: green"></div><br/>
        </div>
    </body>
</html>